<nz-card
  [nzTitle]="cardTitle"
  [nzExtra]="cardExtra"
  nzSize="small"
  style="width: 100%">
  <ng-template #cardTitle>
    <nz-space nzDirection="horizontal">
      <span
        class="title"
        *nzSpaceItem>
        {{ cvcTitle() }}
      </span>
      <cvc-activity-feed-counts
        *nzSpaceItem
        [cvcFeedCounts]="counts()"></cvc-activity-feed-counts>
    </nz-space>
  </ng-template>
  <ng-template #cardExtra>
    <cvc-activity-feed-settings
      (cvcSettingsChange)="onSettingChange$.next($event)"
      [cvcSettings]="cvcSettings()"
      [cvcScope]="cvcScope()">
    </cvc-activity-feed-settings>
  </ng-template>
  <nz-row [nzGutter]="[16, 8]">
    <!-- ACTIVITY FEED COLUMN -->
    <nz-col [nzSpan]="cvcShowFilters() ? 18 : 24">
      <div
        class="feed-container"
        [ngClass]="{ 'feed-border': cvcShowFilters() }">
        <div class="feed-layers">
          <!-- messages layer - TOP -->
          <div class="messages">
            @if (zeroRows()) {
              <nz-result
                nzStatus="info"
                [nzTitle]="resultsMessage"></nz-result>
            }
          </div>
          <ng-template #resultsMessage>
            <div class="results-message">
              No Activities found
              @if (cvcScope().mode === 'SUBJECT') {
                for this subject
              } @else if (cvcScope().mode === 'USER') {
                for this contributor
              } @else if (cvcScope().mode === 'ORGANIZATION') {
                for this organization
              }
              that match specified filters.
            </div>
          </ng-template>

          <!-- scroller layer - BOTTOM-->
          <div class="scroller">
            <nz-spin
              [nzSpinning]="refetchLoading()"
              nzSize="large"
              [nzDelay]="0">
              <div
                cvcAutoHeightDiv="40"
                cvcAutoHeightTarget="viewport">
                @if (scrollDatasource) {
                  <cvc-activity-feed-item
                    *uiScroll="
                      let edge of scrollDatasource;
                      routines: scrollerRoutines
                    "
                    [cvcActivity]="edge.node"
                    [cvcScope]="cvcScope()"
                    [cvcShowOrganization]="showOrganization()">
                    "></cvc-activity-feed-item
                  >
                }
              </div>
            </nz-spin>
          </div>
        </div>
      </div>
    </nz-col>

    <!-- FEED FILTERS COLUMN -->
    @if (cvcShowFilters()) {
      <nz-col
        [nzSm]="24"
        [nzMd]="6">
        <cvc-activity-feed-filters
          (cvcFiltersChange)="onFilterChange$.next($event)"
          [cvcRefreshChanges]="(refreshChange$ | async)!"
          [cvcCheckInterval]="cvcCheckInterval()"
          [cvcFilterOptions]="feedFilterOptions()"
          [cvcFilters]="cvcFilters()"
          [cvcScope]="cvcScope()">
        </cvc-activity-feed-filters>
      </nz-col>
    }
  </nz-row>
</nz-card>
<ng-template #cardExtra>
  <cvc-activity-feed-settings
    (cvcSettingsChange)="onSettingChange$.next($event)"
    [cvcSettings]="cvcSettings()"
    [cvcScope]="cvcScope()">
  </cvc-activity-feed-settings>
</ng-template>
